<template>
  <div class="box">
    <div class="router_box">
      <router-link class="tagsSpan" ref="tag" v-for="tag in visitedViews" :to="tag.fullPath" :key="tag.fullPath"
        :class="isActive(tag) ? 'active' : ''" @contextmenu.prevent.native="openMenu(tag, $event)">
        <span class="tagSpan">{{  tag.name  }}</span>
      </router-link>
    </div>
    <ul class="menu_box" v-if="visible" :style="{ top: top + 'px', left: left + 'px' }">
      <li @click="closeSelectedTag(selectedTag)">关闭当前</li>
      <li @click="closeOthersTags(selectedTag)">关闭其他</li>
      <li @click="closeAllTags">全部关闭</li>
    </ul>

  </div>

</template>

<script>
export default {
  created() {
    // this.$store.state.visitedViews = []
    // console.log('----2', this.$store.state.visitedViews.entries())

  },
  // 监听 $route 值得变化 当有当前路由时就返回不添加 router-link
  watch: {
    $route() {
      let result = this.$store.state.tagsView.visitedViews.some(v => { return v.path === this.$route.path })
      if (result) { return }
      this.addView()
    },
    // 监听 visible 值得变化 点击其他地方关闭 menu 选择框
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  data() {
    return {
      visible: false, // menu 选择框是否显示
      top: 0, // menu 选择框 top 位置
      left: 0, // menu 选择框 left 位置
      selectedTag: {}, // 选中的 router-link

    }
  },
  mounted() {
    this.addView()
  },
  computed: {
    // 从 this.$store.state 中取出 visitedViews - 访问过的页面
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  methods: {
    // 点击路由菜单时触发 this.$store 中的 addView 方法
    addView() {
      let route = this.$route
      this.$store.dispatch('tagsView/addView', route)

    },
    // 判断是不是当前显示的页面
    isActive(route) {
      return route.path === this.$route.path
    },
    // router-link 右键的点击事件
    openMenu(tag, $event) {
      if (tag.name == '首页') return
      this.visible = true
      this.selectedTag = tag
      this.top = $event.clientY // 获取 menu选择框 的位置
      this.left = $event.clientX // 获取 menu选择框 的位置
    },
    // 添加关闭 menu选择框 的点击事件
    closeMenu() { this.visible = false },
    // menu 选择框 关闭当前 的点击事件
    closeSelectedTag(view) {
      if (this.$refs.tag.length > 1) {
        if (this.isActive(view)) {
          let index = this.$store.state.tagsView.visitedViews.findIndex(item => { return item.path === view.path })
          if (index != 0) { this.$router.push(this.$store.state.tagsView.visitedViews[index - 1]) }
        }
      }
      this.$store.dispatch('tagsView/closeSelectedTag', view)
    },
    // menu 选择框 关闭其他 的点击事件
    closeOthersTags(view) {
      this.$store.dispatch('tagsView/closeOthersTags', view)
      if (!this.isActive(view)) { this.$router.push(view) }
    },
    // menu 选择框 全部关闭 的点击事件
    closeAllTags() {
      if (this.$store.state.tagsView.visitedViews.length == 1 && this.$store.state.tagsView.visitedViews[0].name == '首页') return
      this.$store.dispatch('tagsView/closeAllTags')
      this.$router.push('/home')
    }
  }

}
</script>

<style scoped>
.box {
  width: 70%;
  height: 100%;
  /* position: relative; */
}

.router_box {
  width: 100%;
  height: 50px;
  padding-left: 20px;
  font-size: 18px;
  color: #888;
  border: 1px solid red;
  white-space: nowrap;
  overflow: auto;
  /* overflow-y: hidden; */
  /* overflow-x: scroll; */
}

.tagsSpan {
  box-sizing: border-box;
  display: inline-block;
  padding: 0px 8px;
  height: 30px;
  background: rgb(191, 230, 245);
  border-radius: 3px;
  font-size: 15px;
  line-height: 30px;
  margin-top: 10px;
  margin-right: 5px;
}

.tagsSpan:hover {
  transform: scale(1.03);
}

.active {
  background-image: linear-gradient(to right, #6ae2e9, #0dbbc7);
  color: #fff;
}

.menu_box {
  z-index: 100;
  background: #fff;
  position: absolute;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.menu_box li {
  cursor: pointer;
  padding: 8px 15px;
}

.menu_box li:hover {
  background: #eee;
}
</style>